<template>
	<view style="position: fixed;width: 100%;height: 100%;">
		<view class="topBox">
			<view class="example-body mt30">
				<uni-datetime-picker returnType="timestamp" v-model="time" />
			</view>
			<view class="slide1 flex" style="font-size: 24rpx;">
				<searchbar style="width: 75%;" :clearButton="none" v-model="keyword" cancelButton="none"
					placeholder="请输入师傅名字"></searchbar>
				<view class="flex bmain cff"
					style="padding: 15rpx 25rpx; font-size: 20rpx;width: 15%;border-radius: 15rpx;margin-left: 10%;"
					@click="datainit()">查询
				</view>
			</view>
		</view>
		<view class="list mt20">
			<view class="slide" v-for="(item,index) in list" :key="index">
				<image class="image1" :src="item.avatar"></image>
				<view class="name" style="line-height: 35rpx;">
					<text class="word-omit"
						style="width:120rpx;display: inline-block;height: 35rpx;">{{item.nickname}}</text>
					<text class="evaluate">{{item.start}}.0</text>
					<uni-rate class="evaluate" :margin="0" active-color="#FEC860" color="#FEC860" :readonly="true"
						:size="14" :value="item.start" />
				</view>
				<view class="priceNum mt20">
					<view class="price">工时费：{{item.unit_price}}/小时</view>
					<view class="num">累积接单：{{item.total_work_num}}单</view>
				</view>
				<text class="kxz" v-if="item.work_status  == '空闲中'">{{item.work_status}}</text>
				<text class="mlz" v-if="item.work_status  == '忙碌中'">{{item.work_status}}</text>
				<text class="xxz" v-if="item.work_status  == '休息中'">{{item.work_status}}</text>
				<view class="priceNum1 ">
					<view class="num " :class="index != 0 ? 'ml10' :''" v-for="(son,index) in item.workder_type"
						:key="index">{{son}}</view>
				</view>
				<text class="iconfont active" v-if="ids.indexOf(item.uid+',') != -1"
					@click.stop="abs(item.uid)">&#xe689;</text>
				<text class="iconfont notactive" v-if="ids.indexOf(item.uid+',') == -1"
					@click.stop="add(item.uid)">&#xe61e;</text>
				<view class="addr word-omit" :style="{top:(item.workder_type.length == 0 ? '150rpx' : '180rpx')}">师傅地址：{{item.address}}</view>
			</view>
		</view>
		<button @click="confirm">确认选择</button>
	</view>
</template>

<script>
	import {
		worker_list
	} from '../../api/api.js'
	import uniRate from '../../components/uni-ui/lib/uni-rate/uni-rate.vue'
	import searchbar from '../../components/uni-ui/lib/uni-search-bar/uni-search-bar.vue'
	export default {
		components: {
			uniRate,
			searchbar
		},
		data() {
			return {
				list: [],
				keyword: "",
				time: "",
				ids: "",
				form: ""
			}
		},
		onLoad(opt) {
			this.form = opt.form
		},
		created() {
			this.datainit()
		},
		methods: {
			add(e) {
				this.ids += e + ','
				console.log('this,ids1', e, this.ids)
			},
			abs(e) {
				this.ids = this.ids.replace(e + ',', '')
				console.log('this,ids2', e, this.ids)
			},
			// 确认选择
			confirm() {

				let person = []
				let ids = []
				ids = this.ids.split(',')
				this.list.forEach(item => {
					ids.forEach(items => {
						if (item.uid == items) {
							person.push(item)
						}
					})
				})
				console.log('选择的师傅', person, this.ids, this.form)
				let person1 = encodeURIComponent(JSON.stringify(person))

				uni.navigateTo({
					url: `/pages/guarantee/guarantee?person=${person1}&ids=${this.ids}&form=${this.form}`
				})
			},
			// 数据初始化
			datainit() {
				let data = {
					keyword: this.keyword,
					time: this.time
				}
				this.list = []
				worker_list(data).then(res => {
					this.list = res.data
				})
			},
			backClick() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style scoped lang="less">
	.top {
		width: 100%;
		height: 140upx;
		background: #5490FE;
		font-size: 40upx;
		font-weight: bold;
		color: #fff;
		text-align: center;
		padding-top: 68upx;
		position: relative;
		line-height: 1;
		box-sizing: border-box;

		.back {
			width: 50upx;
			height: 50upx;
			position: absolute;
			left: 30upx;
			top: 68upx;

			view {
				width: 30upx;
				height: 30upx;
				border-left: 2px solid #fff;
				border-top: 2px solid #fff;
				transform: rotate(-45deg);
			}
		}
	}

	.topBox {
		padding: 0 30upx;
		box-sizing: border-box;


	}

	.slide1 {
		width: 100%;
	}

	.list {
		padding: 0 30px;
		box-sizing: border-box;
		margin-top: 40upx;

		.slide {
			width: 100%;
			// max-width: 690upx;
			display: flex;
			height: 250rpx;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #F7F5F6;
			box-sizing: border-box;
			padding: 30rpx 20upx;
			padding-right: 0;
			margin-top: 30rpx;
			position: relative;

			.name {
				position: absolute;
				color: #333333;
				font-size: 32rpx;
				top: 20rpx;
				left: 200rpx;
			}

			.evaluate {
				display: inline-block;
				margin-left: 20rpx;
				color: #FEC860;
				font-size: 24rpx;
			}

			.addr {
				position: absolute;
				color: #999999;
				width: 500rpx;
				font-size: 24rpx;
				top: 180rpx;
				left: 200rpx;
			}




			.active {
				position: absolute;
				right: 0;
				color: #029E8E !important;
			}

			.notactive {
				position: absolute;
				right: 0;
				color: #999;
			}

			.kxz,
			.xxz.mlz {
				position: absolute;
				font-size: 20rpx;
				top: 20rpx;
				right: 10rpx;
			}

			.kxz {
				color: #029E8E;
			}

			.mlz {
				color: #FD3833;
			}

			.xxz {
				color: #999999;
			}

			.priceNum1 {
				position: absolute;
				display: flex;
				font-size: 22rpx;
				justify-content: center;
				align-items: center;
				top: 130rpx;
				left: 200rpx;

				.num {
					color: #FEC860;
					// margin-left: 20rpx;
					padding: 0 10rpx;
					background-color: #FFFBD6;
				}
			}
			.priceNum {
				position: absolute;
				display: flex;
				font-size: 20rpx;
				justify-content: center;
				align-items: center;
				top: 60rpx;
				left: 200rpx;

				.price {
					color: #029E8E;
					padding: 0 10rpx;
					background-color: #F2F7FF;
				}

				.num {
					margin-left: 15rpx;
					color: #FEC860;
					padding: 0 10rpx;
					background-color: #FFFBD6;
				}
			}
		}
	}

	button {
		width: 450upx;
		height: 80upx;
		background: #029E8E;
		border-radius: 40upx;
		box-shadow: 0upx 5upx 10upx #5490FE;
		font-size: 32upx;
		color: #fff;
		margin: 70upx auto 100upx;
	}

	.image1 {
		width: 130rpx;
		height: 140rpx;
	}
</style>
